<template>
  <el-checkbox-group v-model="checkboxGroupValue">
    <el-checkbox
      v-for="item in options"
      :key="item.value"
      :label="item.value"
    >
      <span>{{item.text}}</span>
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  name: 'CheckboxOptions',
  model: {
    event: 'change'
  },
  props: {
    value: {
      type: [Array, String],
      default: () => []
    },
    options: {
      type: Array
    }
  },
  data() {
    return {
      checkboxGroupValue: this.value
    };
  },
  watch: {
    value(newValue) {
      this.checkboxGroupValue = newValue
        ? typeof newValue == 'string' ? newValue.split(',') : newValue
        : [];
    },
    checkboxGroupValue(newValue) {
      this.$emit('change', newValue);
    }
  }
}
</script>
<style scoped>
.el-checkbox-group > .el-checkbox {
  margin-right: 8px;
}
>>> .el-checkbox__label {
  padding-left: 2px;
}
</style>